<style lang="less" scoped>

.mobile-product-show {
    padding: 10px 15px;
    padding: 2.66vw 4vw;
    height: 60px;
    height: 16vw;
    background-color: #fff;
    box-shadow: 0 -6px 13px 0 rgba(0, 0, 0, 0.05);
    box-shadow: 0 -1.6vw 3.5vw 0 rgba(0, 0, 0, 0.05);
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    z-index: 1000;
    .share-links {
        width: 195px;
        width: 52vw;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        .share-display-btn {
            i {
                font-size: 13px;
                font-size: 3.5vw;
                color: #64c879;
            }
        }
        .bdsharebuttonbox {
            height: 28px;
            height: 7.5vw;
            margin-left: 5px;
            margin-left: 1.33vw;
        }
    }
    .buy-btn,
    .reserve-btn {
        &,
        &:hover,
        &:focus,
        &:active {
            width: 150px;
            width: 40vw;
            font-size: 18px;
            font-size: 4.8vw;
            padding: 10px 0;
            padding: 2.66vw 0;
            text-align: center;
            color: #fff;
            border: 0;
            border-radius: 5px;
            border-radius: 1.33vw;
            display: block;
            outline: none;
            &.buy-btn {
                background: #64c879;
                box-shadow: 0 3px 9px 0 rgba(100, 200, 121, 0.40);
                box-shadow: 0 0.8vw 2.7vw 0 rgba(100, 200, 121, 0.40);
            }
            &.reserve-btn {
                background: #f5ad4f;
                box-shadow: 0 3px 9px 0 #f5ad4f;
                box-shadow: 0 0.8vw 2.7vw 0 #f5ad4f;
            }
        }
    }
    .mask {
        width: 100vw;
        height: 100%;
        position: fixed;
        background-color: rgba(0, 0, 0, 0.40);
        top: 0;
        left: 0;
        .mask-panel {
            width: 100%;
            height: 50%;
            background-color: #fff;
            position: absolute;
            bottom: 0;
            padding: 10px 15px;
            padding: 2.66vw 4vw;
            .img-price-title {
                display: flex;
                flex-flow: row nowrap;
                align-items: center;
                img {
                    width: 100px;
                    width: 26.6vw;
                    height: 80px;
                    height: 21.3vw;
                    margin-right: 20px;
                    margin-right: 5.33vw;
                }
                h1 {
                    margin: 0;
                    &.price {
                        font-size: 14px;
                        font-size: 3.73vw;
                        margin-bottom: 20px;
                        margin-bottom: 5.33vw;
                    }
                    &.title {
                        font-size: 12px;
                        font-size: 3.2vw;
                    }
                }
            }

            .count-actions{
              display: flex;
              flex-flow: row nowrap;
              align-items: center;
              justify-content: space-between;

              .elms{
                border: 1px solid #e5e5e5;
                height: 30px;
                height: 8vw;
                display: flex;
                flex-flow: row nowrap;

                input, input:active, input:focus, input:hover{
                  border: 0;
                  outline: none;
                  box-shadow: none;
                  width: 30px;
                  width: 8vw;
                  /* height: 100%; */
                  text-align: center;
                }

                button, button:active, button:focus, button:hover{
                  border: 0;
                  outline: none;
                  box-shadow: none;
                  /* height: 100%; */
                  background-color: #fff;

                  &.cut{
                    border-right: 1px solid #e5e5e5;
                  }
                  &.plus{
                    border-left: 1px solid #e5e5e5;
                  }
                }
              }
            }

            .submit-btn, .submit-btn:hover, .submit-btn:focus, .submit-btn:active{
              background-color:#64c879;
              box-shadow:0 3px 9px 0 rgba(100,200,121,0.40);
              box-shadow: 0 0.8vw 2.7vw 0 rgba(100, 200, 121, 0.40);
              border-radius: 5px;
              border-radius: 1.33vw;
              width: 100%;
              border: 0;
              color: #fff;
              font-size: 18px;
              font-size: 4.8vw;
              padding: 8px 0;
              padding: 2vw 0;
              margin-top: 20px;
              margin-top: 5.33vw;
              outline: none;
            }
        }
    }
}

</style>

<template>

<div class="mobile-product-show" id="mobileProduct">
    <div class="share-links">
        <div class="share-display-btn" @click="isShare = !isShare">
            <i class="fa fa-share-alt"></i> 分享商品
        </div>
        <div v-show="isShare" class="bdsharebuttonbox">
            <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
            <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
            <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
            <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
            <a href="#" class="bds_more" data-cmd="more"></a>
        </div>
    </div>

    <button type="button" name="button" class="buy-btn" v-if="isReserve" @click="showBuyPanel = !showBuyPanel">立即购买</button>
    <a href="javascript:void(0)" @click="goToReserve" class="reserve-btn" v-else>一键预约</a>

    <div class="mask" v-show="showBuyPanel">
        <div class="mask-panel">
            <button type="button" class="close pull-right" @click="showBuyPanel = !showBuyPanel"><span aria-hidden="true">&times;</span></button>
            <div class="img-price-title">
                <img :src="product.main_img_url" alt="">
                <div class="">
                    <h1 class="text-red price">￥{{product.msrp}}</h1>
                    <h1 class="text-gray title">{{product.title}}</h1>
                </div>
            </div>

            <hr>

            <div class="count-actions">
              <div class="tip">购买数量：</div>
              <div class="elms">
                <button class="cut" type="button" name="button" @click="cut">-</button>
                <input type="number" name="" value="" min=0 :max="product.product_amount" v-model="count" readonly="readonly">
                <button class="plus" type="button" name="button" @click="plus">+</button>
              </div>
            </div>

            <button type="button" name="button" class="submit-btn" @click="buyNow">立即购买</button>
        </div>
    </div>
</div>

</template>

<script>
import Query from '../query'
import SuccessDialog from 'success_alert'
import ErrorDialog from 'error_alert'

export default {
    name: "mobileProduct",
    props: {
        productData: {
            type: Object,
            requried: true
        }
    },

    data: () => ({
        product: '',
        isShare: false,
        showBuyPanel: false,
        count: 1
    }),

    computed: {
        isReserve: {
            get: function() {
                return this.product.product_type === 'finished'
            }
        }
    },

    mounted: function mounted() {
        this.product = this.productData
        console.log(this.product)
    },

    methods: {
      goToReserve() {
        window.location.href="/reserves/new"
      },
      cut() {
        if (this.count > 1 ) {
          this.count--
        } else {
          ErrorDialog.show('小主，不能再减了！')
        }
      },
      plus() {
        if (this.count <= 19 ) {
          this.count++
        } else {
          ErrorDialog.show('小主，库存不足了！')
        }
      },
      buyNow() {
        Query.post('/carts', {
          amount: this.count,
          product_id: this.product.id
        }).then((response) => {
          if (response) {
            window.location.href = '/orders/new'
          } else {
            ErrorDialog.show('前往支付')
          }
        }).catch((error) => {
        })
      }
    }
}

</script>
